<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">{{ title }}</block>
		</cu-custom>
		<scroll-view scroll-x class="cu-bar bg-white search fixed nav" :style="[{ top: CustomBar + 'px' }]" scroll-with-animation :scroll-left="scrollLeft">
			<view class="cu-item" :class="index == TabCur ? 'text-blue cur' : ''" v-for="(item, index) in tabDataList" :key="index" @tap="tabSelect" :data-id="index">
				{{ item.name }}
			</view>
		</scroll-view>
		
	<!-- 	<block v-for="(item, index) in tabDataList" :key="index" @tap="tabSelect" :data-id="index">
			<view v-if="TabCur == index">
				 -->
				<view class="cu-card article no-card">
					<block v-for="(item, index) of flowList" :key="index">
						<view class="cu-item shadow u-border-top" @click="atcItemClicked(item)">
							<view class="title">
								<view class="text-cut">{{ item.title }}</view>
							</view>
							<view class="content">
								<image :src="!item.firstImg ? defaultImgUrl : item.firstImg" mode="scaleToFill" lazy-load="true"
								@tap="previewImg" :data-imgurl="!item.firstImg ? defaultImgUrl : item.firstImg"></image>
								<view class="desc">
									<view class="text-content">{{ item.description.substring(0, 20) }}</view>
									<view>
										<block v-for="(tag, tIndex) of item.keywords.split(',').slice(0, 2)" :key="tIndex">
											<view class="cu-tag bg-red light sm round" v-if="tIndex % 2 == 0">{{ tag }}</view>
											<view class="cu-tag bg-brown light sm round" v-if="tIndex % 2 != 0">{{ tag }}</view>
										</block>
									</view>
								</view>
							</view>
						</view>
					</block>
				</view>
		<!-- 	</view>
		</block> -->
		
		<u-loadmore class="padding" bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData" :load-text="loadText"></u-loadmore>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: '',
			TabCur: 0,
			scrollLeft: 0,
			CustomBar: this.CustomBar,
			loadStatus: 'loadmore',
			loadText: {
				loadmore: '点击或上拉加载更多',
				loading: '努力加载中',
				nomore: '实在没有了'
			},
			flowList: [],
			tabItemDataList: [],
			tabDataList: [
				{
					id: 0,
					name: '最新',
					param: ''
				},
				{
					id: 1,
					name: '热门',
					param: ''
				}
			],
			defaultImgUrl: '',
			newArticleUrl: '',
			catalogUrl: '',
			pageIndex: 0
		};
	},
	onLoad(options) {
		
		this.defaultImgUrl = uni.$AppConfig.requestConfig.defaultImgUrl;
		this.newArticleUrl = uni.$AppConfig.requestConfig.newArticleUrl;
		this.catalogUrl = uni.$AppConfig.requestConfig.catalogUrl;
		this.TabCur = options.tabIndex;
		this.TabCur = this.TabCur === undefined ? 0 : this.TabCur;
		
		this.initCatalogList(this.catalogUrl);
	},
	methods: {
		initCatalogList(url) {
			let _this = this;
			_this.getInitData(url, function(res) {
				if (res == 'undefined') {
					_this.getInitDataErrMsg();
					return;
				}

				let resTrueData = res.data;
				if (resTrueData.code == 1) {
					let categoryList = resTrueData.data.categoryList;
					_this.addTabIteData(categoryList);
				} else {
					_this.getInitDataErrMsg();
				}
			});
		},
		getInitData(url, successCallback) {
			let _this = this;
			uni.request({
				url: url, //仅为示例，并非真实接口地址。
				data: {
				},
				success: res => {
					if (res == 'undefined') {
						_this.getInitDataErrMsg();
						return;
					}
					
					successCallback(res);
				},
				fail: err => {
					_this.getInitDataErrMsg();
				}
			});
		},
		addTabIteData(categoryList) {
			let _this = this;
			// 添加Tab切换项
			for (let key in categoryList) {
				let category = categoryList[key];
				if (!category.status) continue;
				let item = {
					id: key + 2,
					name: category.name,
					param: category.id
				};
				_this.tabDataList.push(item);
			}
			
			_this.getLoadTabData();
		},
		getLoadTabData() {
			// 设置数据
			let _this = this;
			_this.getTitle(_this.TabCur);
			_this.getAtcItemList(_this.tabDataList[_this.TabCur]);
		},
		getAtcItemList(item) {
			let _this = this;
			let page = this.pageIndex;
			let reqUrl = this.newArticleUrl;

			switch (_this.TabCur) {
				case 0:
					{
						reqUrl += '?orderBy=publish_time&limit=10&page=' + page;
					}
					break;
				case 1:
					{
						reqUrl += '?orderBy=views&limit=10&page=' + page;
					}
					break;
				default: {
					// console.log(item.param)
					reqUrl += '?cid=' + item.param + '&orderBy=publish_time&limit=10&page=' + page;
				}
			}
	
			_this.getInitData(reqUrl, function(res) {
				if (res == 'undefined') {
					_this.getInitDataErrMsg();
					return;
				}

				let resTrueData = res.data;
				
				if (resTrueData.code == 1) {
					_this.tabItemDataList = resTrueData.data.itemList;
					
					if(_this.tabItemDataList.length == 0) {
						_this.loadStatus = 'nomore';
					} else {
						if(_this.pageIndex > 0) {
							_this.flowList = _this.flowList.concat(_this.tabItemDataList);
						} else {
							_this.flowList = _this.tabItemDataList;
						}
						
						_this.loadStatus = 'loadmore';
					}
					
					uni.hideLoading();
					uni.stopPullDownRefresh();
				} else {
					_this.getInitDataErrMsg();
				}
			});
		},
		getTitle(index) {
			// console.log(this.tabDataList, index);
			this.title = this.tabDataList[index].name;
		},
		tabSelect(e) {
			this.pageIndex = 0;
			this.flowList = [];
			
			// uni.startPullDownRefresh();
			// uni.showLoading({
			// 	mask: true,
			// 	title: '加载中'
			// });
			this.TabCur = e.currentTarget.dataset.id;
			this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
			this.getTitle(this.TabCur);
			this.addRandomData();
		},
		addRandomData() {
			const _this = this;
			_this.loadStatus = 'loading';
			this.pageIndex++;
			setTimeout(function() {
				_this.getLoadTabData();
				
			}, 1000);
		},
		getInitDataErrMsg() {
			uni.showToast({
				title: '数据加载失败',
				icon: 'error',
				duration: 2000
			});
		},
		atcItemClicked(item) {
			uni.navigateTo({
				url: '../article-detail/article-detail?id=' + item.id
			});
		},
		previewImg(e) {
			// let imgurl = e.currentTarget.dataset.imgurl;
			// let imgArr = [];
			// imgArr[0] = imgurl;
			// uni.previewImage({
			// 	current: 0,
			// 	urls: imgArr
			// });
		}
	},
	onPullDownRefresh() {
		this.pageIndex = 0;
		this.flowList = [];
		this.addRandomData();
	},
	onReachBottom() {
		this.addRandomData();
	}
};
</script>

<style>
page {
	padding-top: 50px;
}
</style>
